/*
  整体下滑过渡
*/
.slide-leave-active,
.slide-enter-active {
  transition: all .5s ease;
}

.slide-leave-active {
  transform: translateY(0);
}

.slide-enter-active {
  transform: translateY(-100vh);
}

.slide-enter-to {
  transform: translateY(0px);
}

.slide-leave-to {
  transform: translateY(100vh);
}


/*
  整体上滑过渡
*/
.slide-down-leave-active,
.slide-down-enter-active {
  transition: all .5s ease;
}

.slide-down-leave-active {
  transform: translateY(0);
}

.slide-down-enter-active {
  transform: translateY(100vh);
}

.slide-down-enter-to {
  transform: translateY(0px);
}

.slide-down-leave-to {
  transform: translateY(-100vh);
}

/*
  淡入淡出加位移过渡
*/
.slide-fade-enter-active {
  transition: transform .5s cubic-bezier(.19, 1.63, 0, 1),
  opacity .5s ease;
}

.slide-fade-leave-active {
  transition: transform .5s cubic-bezier(.09, -0.32, 1, -0.16),
  opacity .5s ease;
}

.slide-fade-enter-active {
  transform: translateY(50px);
  opacity: 0;
}

.slide-fade-enter-to {
  transform: translateY(0px);
  opacity: 1;
}

.slide-fade-leave-active {
  transform: translateY(0px);
  opacity: 1;
}

.slide-fade-leave-to {
  transform: translateY(50px);
  opacity: 0;
}

/*
  淡入淡出过渡
*/
.fade-leave-active,
.fade-enter-active {
  transition: all .5s ease;
}

.fade-enter-active {
  opacity: 0;
}

.fade-enter-to {
  opacity: 1;
}

.fade-leave-active {
  opacity: 1;
}

.fade-leave-to {
  opacity: 0;
}